<template>
  <div class="survey-radio-outer">
    <div class="survey-radio-desc">
      <div class="desc-title">
        测评题 <span class="desc-count">({{ questions.length }}道小题)</span>
      </div>
      <div class="desc-tip">
        每小题列出的6个选项，请根据自身的实际情况及按照问题选出一项最符合的。
      </div>
    </div>
    <div class="survey-radio-list">
      <div
        v-for="question in questions"
        :key="question.questionId"
        :id="'question-' + question.questionNo"
        class="survey-radio-card"
      >
        <div class="question-header">
          <span class="question-no-badge">{{ question.questionNo }}</span>
          <span class="question-content">{{ question.questionText }}</span>
        </div>
        <el-radio-group v-model="model[question.questionId]" :disabled="false">
          <el-radio
            v-for="item in options"
            :key="item.value"
            :value="item.value"
            class="option-item"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
        <div class="card-divider"></div>
      </div>
    </div>
    <div class="survey-submit-btn">
      <el-button type="primary" size="large" @click="handleSubmit"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { watch, toRefs, ref, nextTick, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
  questions: {
    type: Array,
    required: true,
  },
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  options: {
    type: Array,
    default: () => [
      // 选项
      { label: "强烈不同意", value: 1 },
      { label: "不同意", value: 2 },
      { label: "略有异议", value: 3 },
      { label: "基本同意", value: 4 },
      { label: "同意", value: 5 },
      { label: "强烈同意", value: 6 },
    ],
  },
});
const emit = defineEmits(["update:modelValue", "submit"]);
const { modelValue } = toRefs(props);
const model = modelValue;

// 强制刷新 el-radio-group //////////////////////////////////////
const radioKey = ref(0);
function forceRefresh() {
  radioKey.value++;
}

onMounted(() => {
  window.addEventListener("focus", forceRefresh); //切屏后回到页面后刷新页面
});

onBeforeUnmount(() => {
  window.removeEventListener("focus", forceRefresh);
});

watch(model, (val) => {
  emit("update:modelValue", { ...val });
});

function handleSubmit() {
  emit("submit", { ...model.value });
}
</script>

<style scoped>
.survey-radio-outer {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.survey-radio-desc {
  background: #fafbfc;
  border: 1px solid #ededed;
  border-radius: 3px;
  margin-bottom: 24px;
  padding: 28px 36px 18px 36px;
}
.desc-title {
  font-size: 26px;
  font-weight: bold;
  color: #222;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
}
.desc-count {
  font-size: 18px;
  color: #444;
  font-weight: normal;
  margin-left: 8px;
}
.desc-tip {
  font-size: 17px;
  color: #ff6700;
  margin-top: 8px;
  line-height: 1.7;
  text-align: left;
}
.survey-radio-list {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f5f5f5;
}
.survey-radio-list::-webkit-scrollbar {
  width: 8px;
}
.survey-radio-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.survey-radio-list::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.survey-radio-card {
  background: #fff;
  border: none;
  border-radius: 6px;
  margin-bottom: 0;
  padding: 0 0 0 0;
  box-shadow: none;
  transition: box-shadow 0.2s;
}
.survey-radio-card:hover {
  box-shadow: 0 4px 16px 0 rgba(64, 158, 255, 0.08);
}
.question-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
  padding: 18px 0 0 0;
}
.question-no-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #5cadff;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;
  margin-left: 20px;
  margin-top: 0;
}
.question-content {
  font-weight: 500;
  color: #333333;
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all;
  text-align: left;
  padding-left: 0;
  margin-left: 0;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 44px;
  margin-bottom: 8px;
  align-items: flex-start;
  padding: 8px 0;
}
.option-item {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  color: #444;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  text-align: left;
  display: flex !important;
  line-height: 1.5;
}

/* 调整radio按钮和文字的对齐 */
.option-item :deep(.el-radio__input) {
  align-self: flex-start;
  margin-top: 2px;
}

.option-item :deep(.el-radio__label) {
  padding-left: 8px;
  line-height: 1.5;
  word-break: break-word;
  font-size: 14px;
  color: #666666;
}
.card-divider {
  height: 1px;
  background: #e4e7ed;
  margin: 0 0 0 0;
  width: 100%;
}
.survey-submit-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 16px 0;
  background: #fafbfc;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.el-button.el-button--primary.el-button--large {
  width: 112px;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
}
</style>
